<script setup>

import { articleCategoryListService, articleListService, articleAddService, articleDeleteService, articleUpdateService } from '@/api/article.js';
import { ref } from 'vue';

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(90000)//每页条数
const list = ref();
//获取文章列表数据
const articleList = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    };

    let result = await articleListService(params);
    console.log(result, "11111");
    //渲染数据
    list.value = result.data.items;

}
//调用
articleList();



const dialogVisible = ref(false);
const currentDetail = ref({});

const showDetail = (item) => {
    currentDetail.value = item;
    dialogVisible.value = true;
};
</script>
<template>
    <el-container>
        <!-- 使用弹性布局，设置行之间的间距为20px -->
        <el-row :gutter="12">
            <!-- 循环遍历列表中的每个项目，每个项目占据4.6个栅格 -->
            <el-col :span="4.6" v-for="(item, index) in list" :key="id">
                <!-- 使用卡片组件展示项目摘要，点击以显示详细信息 -->
                <div style="padding-bottom:10px ;">
                    <el-card shadow="hover" @click="showDetail(item)">
                        <img :src="item.coverImg" class="image" />
                        <div style="padding: 1px;">
                            <!-- 居中 -->
                            <span class="title">{{ item.title }}</span>

                            <!-- 使用内联HTML渲染富文本内容 -->
                            <div class="bottom_clearfix">
                                <div class="rich-text" v-html="item.content"></div>
                            </div>
                        </div>
                    </el-card>
                </div>

            </el-col>
        </el-row>
        <!-- 用于显示项目详细信息的对话框 -->
        <el-dialog  v-model="dialogVisible" title="详细信息" width="80%">
            <p>标题: {{ currentDetail.title }}</p>
            <!-- 在这里显示项目的详细内容 -->
            <div class="full-rich-text" v-html="currentDetail.content"></div>
            <!-- 注释掉的图片占位符，可能未来用于显示封面图片 -->
            <!-- <img :src="currentDetail.coverImg" alt="" style="width: 100%;"> -->
        </el-dialog>
    </el-container>
</template>



<style scoped>
.image {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    display: block;
}

/* 清除浮动的影响，用于包含浮动元素的容器 */
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

/* 清除内部浮动，确保容器高度正常 */
.clearfix:after {
    clear: both;
}

/* 允许富文本在弹窗中换行显示，避免内容溢出 */
.full-rich-text {
    white-space: pre-wrap;
    /* display: grid;
  place-items: center; 同时水平和垂直居中 */
}

/* 设置一个固定高度的底部清除区域，用于处理浮动元素可能导致的布局问题 */
.bottom_clearfix {
    height: 20px;
}

/* 限制富文本区域的宽度，并显示省略号，用于摘要展示 */
.rich-text {
    display: grid;
    place-items: center;
    /* 同时水平和垂直居中 */
    width: 200px;
    /* background-color: rgb(216, 225, 233); */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title {
    /* 居中 */
    background-color: rgb(208, 238, 240);
    display: grid;
    place-items: center;
    /* 同时水平和垂直居中 */
}


</style>